<template>
<div class="Lp">
  <el-form :rules="rules"
           v-loading="loading"
           element-loading-text="正在登录..."
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.8)"
           ref="loginForm"
           :model="loginForm"
           class="loginContainer" >
    <h3 class="loginTitle">门诊系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username" auto-complete="false" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="false" placeholder="请输入登录密码"></el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input type="text" v-model="loginForm.code" auto-complete="false" placeholder="点击图片更换验证码" style="width:250px;margin-right: 5px"></el-input>
      <img :src="captchaUrl" @click="updateCaptcha()">
    </el-form-item>
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
      <el-button type="primary" @click="submitLogin" style="width:100%">登录</el-button>


  </el-form>
</div>
</template>

<script>


import { Message } from 'element-ui';

export default {
  name: "Login",
  data() {
    return {
      captchaUrl: '/captcha?time=' + new Date(),
      loginForm: {
        username: 'admin',
        password: '123',
        code: ''
      },
      loading:false,
      checked: true,
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],/*失去焦点的时候监听提示请输入用户名*/
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    updateCaptcha() {
      this.captchaUrl = '/captcha?time' + new Date();
    },

    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading=true;//点击登录按钮进行加载动画
          this.postRequest('/login', this.loginForm).then(resp => {
            if (resp) {
                  this.loading=false;//登录成功关闭加载动画
                  const tokenStr = resp.obj.tokenHead + resp.obj.token;
                  window.sessionStorage.setItem('tokenStr', tokenStr);
                  //清空菜单
                  this.$store.commit('initRoutes', []);
                  //页面跳转
                  let path = this.$route.query.redirect;
                  this.$router.replace((path === '/' || path === undefined) ? '/home' : path)
            }
            this.loading=false;//登录失败也要关闭加载动画
          }).catch(error => {

            Message.error('账号或密码错误');
            this.loading=false;
            console.log(error);
          });
        }
      });
    }
  }
}


</script>
<style>
    .loginContainer{
      border-radius: 15px;/*大边框*/
      background-clip: padding-box;/*内边距*/
      margin: 180px auto;
      width: 350px;
      padding: 15px 35px 15px 35px;
      background-color: #fff;
      border:1px solid #eaeaea;/*边框及颜色*/
      box-shadow: 0 0 25px #cac6c6;
    }
    .loginTitle{
      margin: 0px auto 40px auto;/*内边距*/
      text-align: center;
    }
    .loginRemember{
      text-align: left;
      margin: 0px 0px 15px 0px;
    }
    .el-form-item__content{
      display: flex;
      align-items: center;

    }
    .Lp{
      height: 100%;
      width: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: fixed;
      background-image: url("../assets/img/2.jpg");
    }


</style>